<template>
	<view class="container">
		<tabbar currentPages="我的" />
		<view class="other_accounts" @tap="goUserOther"
			v-if="pays.userInfo.otherAccountTodo&&pays.userInfo.otherAccountTodo.length>0 && userInfo.id"
			:style="{background:`url(${iconUrl}42.png) no-repeat`, backgroundSize:'cover'}">
			<!-- #ifdef APP -->
			<view class="other_accounts_left">
				<image class="other_accounts_img" :src="`${iconUrl}01.png`" mode=""></image>
				<view class="other_accounts_info_name">{{ pays.userInfo.otherAccountTodo[0].nickName}}</view>
				<view class="other_accounts_info_tips">
					(<text>{{pays.userInfo.otherAccountTodo[0].pendingApplyStudioCount ? '待修改陪宠师申请,':''}}
						{{pays.userInfo.otherAccountTodo[0].pendingOrderCount ? '待接单+'+ pays.userInfo.otherAccountTodo[0].pendingOrderCount +',':''}}
						{{pays.userInfo.otherAccountTodo[0].notReadMessageCount ? '未读消息+'+ pays.userInfo.otherAccountTodo[0].notReadMessageCount +',':''}}
						{{pays.userInfo.otherAccountTodo[0].waitOrderCount ? '待服务+'+ pays.userInfo.otherAccountTodo[0].waitOrderCount:''}}</text>)
				</view>
			</view>
			<!-- #endif -->
			<view class="other_accounts_right">
				<text>切换账号</text>
				<uni-icons type="right" size="13" color="#1B2120"></uni-icons>
			</view>
		</view>
		<view class="header" :style="{background:`url(${iconUrl}42.png) no-repeat`, backgroundSize:'cover'}"
			@tap="goLogin">
			<view class="header_user_info">
				<image class="user_info_img" :src="pays.userInfo.avatar ? pays.userInfo.avatar : `${iconUrl}01.png`"
					mode=""></image>
				<view class="user_info_text">
					<template v-if="pays.userInfo.id">
						<view class="user_info_name">{{pays.userInfo.nickName}}</view>
						<view class="user_info_id">用户编号 {{pays.userInfo.id}}</view>
					</template>
					<template v-else>
						<text class="user_info_name">未登录</text>
					</template>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card_box recommend_box">
				<view class="recommend_info">
					<view class="recommend_info_left">
						<image class="" :src="`${iconUrl}158.png`" mode=""></image>

						<view class="">{{pays.userInfo.refereeNickName}}</view>
					</view>
					<view class="recommend_info_right">
						<image class="" :src="`${iconUrl}157.png`" mode=""></image>
						<view class="">{{pays.userInfo.refereeStudioName }}</view>

					</view>
				</view>
			</view>
			<view class="my_order card_box">
				<view class="card_title">
					<view class="card_title_name">服务订单</view>
					<view class="card_title_btn" @click="goPetOrder(-1,-1)">
						<text>查看全部</text>
						<uni-icons type="right" :color="'#7C807F'" :size="12"></uni-icons>
					</view>
				</view>
				<view class="card_content">
					<view class="card_item" @click="goPetOrder(-1,0)">
						<image class="card_item_img" :src="iconUrl + '165.png'" mode="">
						</image>
						<view class="card_item_text">待付款</view>
					</view>
					<view class="card_item" @click="goPetOrder(-1,1)">
						<image class="card_item_img" :src="iconUrl + '166.png'" mode="">
						</image>
						<view class="card_item_text">待接单</view>
					</view>
					<view class="card_item" @click="goPetOrder(0,1)">
						<image class="card_item_img" :src="iconUrl + '167.png'" mode="">
						</image>
						<view class="card_item_text">待服务</view>
					</view>
					<view class="card_item" @click="goPetOrder(0,2)">
						<image class="card_item_img" :src="iconUrl + '168.png'" mode="">
						</image>
						<view class="card_item_text">服务中</view>
					</view>
					<!-- <view class="card_item" @click="goPetOrder(0,3)">
						<image class="card_item_img" :src="iconUrl + '37.png'" mode="">
						</image>
						<view class="card_item_text">已完成</view>
					</view> -->
				</view>
			</view>
			<view class="my_order card_box">
				<view class="card_title">
					<view class="card_title_name">商城订单</view>
					<view class="card_title_btn" @click="goShoppingOrder(-1)">
						<text>查看全部</text>
						<uni-icons type="right" :color="'#7C807F'" :size="12"></uni-icons>
					</view>
				</view>
				<view class="card_content">
					<view class="card_item" @click="goShoppingOrder(0)">
						<image class="card_item_img" :src="iconUrl + '169.png'" mode="">
						</image>
						<view class="card_item_text">待付款</view>
					</view>
					<view class="card_item" @click="goShoppingOrder(1)">
						<image class="card_item_img" :src="iconUrl + '170.png'" mode="">
						</image>
						<view class="card_item_text">待发货</view>
					</view>
					<view class="card_item" @click="goShoppingOrder(2)">
						<image class="card_item_img" :src="iconUrl + '171.png'" mode="">
						</image>
						<view class="card_item_text">待收货</view>
					</view>
					<view class="card_item" @click="goShoppingOrder(3)">
						<image class="card_item_img" :src="iconUrl + '172.png'" mode="">
						</image>
						<view class="card_item_text">已完成</view>
					</view>
				</view>
			</view>
			<view class="my_pet card_box">
				<view class="card_title">
					<view class="card_title_name">我的宠物</view>
					<view class="card_title_btn" @tap="goPet()">
						<text>查看全部</text>
						<uni-icons type="right" :color="'#7C807F'" :size="12"></uni-icons>
					</view>
				</view>
				<view class="card_content card_content_pet">
					<template v-if="pays.petList.length > 0">
						<scroll-view class="card_content_pet_scroll" :scroll-y="true">
							<view class="card_item card_item_pet" v-for="(petListItem,petListIndex) in pays.petList"
								:key="petListIndex" @tap="goPetSet(petListItem)">
								<image class="card_item_img_my_pet" :src="petListItem.petAvatar" mode=""></image>
								<view class="card_item_text">
									<view class="card_item_text_pet">
										<text>{{petListItem.petNickName}}</text>
									</view>
									<view class="card_item_text_pet_bottom">
										<template v-if="petListItem.variety || petListItem.typeName">
											{{petListItem.variety ? petListItem.variety + " | " : petListItem.typeName + " | " }}
										</template>
										{{petListItem.sex == 2 ? '' : petListItem.sex == 1 ? '母 | ' : '公 | '}}
										{{petListItem.birthdayValue ? petListItem.birthdayValue + ' | ' : ''}}
										{{petListItem.ifVaccinate == 1 ? '未免疫' : '已免疫'}} |
										{{petListItem.ifNeuter == 1 ? '未绝育' : '已绝育'}}
									</view>
								</view>
							</view>
						</scroll-view>


					</template>
					<view class="add_pet" @tap="petAdd">
						<image class="add_pet_img" :src="iconUrl + '30.png'" mode=""></image>
						<view class="add_pet_text">添加宠物</view>
					</view>
				</view>
			</view>
			<view class="tools card_box">
				<view class="tools_content">
					<view class="tools_content_item" @tap="toolsUrl('/pages/addressManagement/addressList/index')">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '19.png'" mode=""></image>
							<view class="">我的地址</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
					<view class="tools_content_item" @tap="handleContact('400-154-1313')">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '22.png'" mode=""></image>
							<view class="">联系客服</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
					<view class="tools_content_item" @tap="applyPet">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '23.png'" mode=""></image>
							<view class="">申请陪宠师</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
					<view class="tools_content_item" @tap="toPay">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '127.png'" mode=""></image>
							<view class="">线下付款</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
					<view class="tools_content_item"
						@tap="toolsUrl('/pages/serviceDetails/serviceQualification/serviceQualification')">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '63.png'" mode=""></image>
							<view class="">服务资质</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
					<view class="tools_content_item" @tap="toolsUrl('/pages/setting/index/index')">
						<view class="tools_content_item_left">
							<image :src="iconUrl + '25.png'" mode=""></image>
							<view class="">设置</view>
						</view>
						<view class="tools_content_item_right">
							<uni-icons type="right" :color="'#1B2120'" :size="16"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { reactive, onMounted, computed, ref } from 'vue'
	import { accredit } from '@/hooks/useAppPermission/index';
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	import { updateUserInfo } from '@/hooks/useLogin'

	interface userInfoItem {
		avatar : string,
		nickName : string,
		id : number | string,
		icon : string
	}
	interface orderNumListItem { }
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const pays = reactive<{
		userInfo : Partial<userInfoItem>
		petList : []
		orderNumList : Partial<orderNumListItem>
	}>({
		userInfo: {
		},
		petList: [],
		orderNumList: {}
	})
	const getUserInfo = async () => {
		const res : any = await updateUserInfo()
		if (res) {
			pays.userInfo = res.data
			console.log(pays.userInfo, 'pays.userInfo')
		}
	}
	const getPetList = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/pet/page`,
			data: { page: 1, limit: 20, userId: pays.userInfo.id }
		})
		if (res) {
			pays.petList = res.data.records
		}

	}
	const getOrderNumList = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/order/status/MyOrderCount?userId=${pays.userInfo.id}`,

		})
		if (res) {
			pays.orderNumList = res.data
		}

	}
	const toPay = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/payment/uploadBargainInfoList/index`
		})
	}
	onLoad(() => {
	})
	onShow(async () => {
		if (userInfo.value) {
			await getUserInfo()
			await getPetList()
			await getOrderNumList()
		} else {
			pays.userInfo = {}
			pays.petList = []
			pays.orderNumList = {}
		}

		//await checkStudio()
	})
	const studioId = ref('')//工作室id
	//判断是否存在工作室
	const checkStudio = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/checkStudio`,
			data: {
				userId: userInfo.value.id
			}
		})
		/* isApplyLookAfterPetBtn.value = res.data ? false : true */
		if (res.data) {
			studioId.value = res.data
		}

	}
	const goPetOrder = (orderType : any, orderStatus : any) => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/petsOrder/petsList/index?orderType=${orderType}&orderStatus=${orderStatus}`
		})
	}
	const goShoppingOrder = (orderStatus : any) => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/shopping/orderList/index?orderStatus=${orderStatus}`
		})
	}

	// 联系客服
	const handleContact = async (item) => {
		// #ifdef APP
		const status = await accredit('CALL_PHONE')
		if (status != 1) return
		// #endif
		uni.showModal({
			title: '提示',
			content: '客服上班时间：周一到周六 09:30~18:30',
			confirmText: '确定呼叫'
		}).then((e) => {
			console.log(e)
			if (e.confirm) {
				uni.makePhoneCall({
					phoneNumber: item
				})
			}
		})
	}
	const toolsUrl = (url : string) => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url
		})
	}
	const applyPet = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: '/pages/applyPetTeacher/index/index'
		})
		//checkStudio()
	}
	const goPet = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/petList/index/index`
		})
	}
	const goPetSet = (item) => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/petList/setPet/setPet?id=${item.id}`
		})
	}
	const goLogin = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})

		} else {
			uni.navigateTo({
				url: '/pages/setting/index/index'
			})
		}
	}
	const petAdd = () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/petList/setPet/setPet`
		})
	}
	const goUserOther = () => {
		uni.navigateTo({
			url: '/pages/setting/changeAccountNumber/index'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F8F8F8;
		min-height: 100%;
		//box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.other_accounts {
		padding: 0 32rpx;
		width: 100%;
		height: 72rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E4E6E6;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 1;

		.other_accounts_left {
			display: flex;
			align-items: center;

			.other_accounts_img {
				width: 32rpx;
				height: 32rpx;
			}

			.other_accounts_info_name {
				max-width: 160rpx;
				margin: 0 8rpx;
				font-size: 26rpx;
				color: #1B2120;
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 限制显示的行数为2 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.other_accounts_info_tips {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #7C807F;

				text {
					width: 280rpx;

					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 限制显示的行数为2 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.other_accounts_right {
			font-size: 26rpx;
			color: #1B2120;

		}

	}

	.header {
		height: 294rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		line-height: 1;
		//background: linear-gradient(107deg, #E8F9F6 2%, #FDEBFF 49%, #FEDCE3 100%);
		background-size: cover;

		.header_user_info {
			display: flex;
			width: 686rpx;
			height: 160rpx;
			margin: 0 auto;

			.user_info_img {
				margin-right: 16rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}

			.user_info_text {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;

				.user_info_name {
					margin-bottom: 20rpx;
					font-size: 44rpx;
					color: #1B2120;
					font-weight: bold;
					word-break: break-all;
				}

				.user_info_id {
					font-size: 26rpx;
					color: #5C5E5E;
				}

				text {
					font-size: 44rpx;
					color: #1B2120;
					font-weight: bold;
				}
			}
		}
	}


	.content {
		margin-top: -68rpx;

		.card_box {
			width: 686rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx;
			line-height: 1;

			.recommend_info {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #7C807F;
				line-height: 1;

				.recommend_info_left {
					display: flex;
					align-items: center;
					width: 50%;

					image {
						margin-right: 8rpx;
						width: 64rpx;
						height: 26rpx;
					}

					view {
						/* #ifdef APP */
						margin-top: 4rpx;
						/* #endif */
						width: 200rpx;
						line-height: 1;
						word-break: break-word;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

				}

				.recommend_info_right {
					display: flex;
					align-items: center;
					width: 50%;

					image {
						margin-right: 8rpx;
						width: 120rpx;
						height: 26rpx;
					}

					view {
						/* #ifdef APP */
						margin-top: 4rpx;
						/* #endif */
						width: 170rpx;
						word-break: break-word;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 限制显示的行数为2 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.card_title {
				margin-bottom: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.card_title_name {
					font-size: 36rpx;
					color: #1B2120;
					font-weight: bold;
				}

				.card_title_btn {
					text {
						font-size: 24rpx;
						color: #7C807F;
					}

				}
			}

			.card_content {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.card_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					.card_item_img {
						margin-bottom: 16rpx;
						width: 48rpx;
						height: 48rpx;
					}

					.card_item_img_my_pet {
						margin-right: 16rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.card_item_text {
						font-size: 26rpx;
						color: #1B2120;
						line-height: 1;

						.card_item_text_pet {
							display: flex;
							align-items: center;
							margin-bottom: 16rpx;

							image {
								margin-left: 16rpx;
								width: 36rpx;
								height: 36rpx;
							}

							text {
								font-size: 32rpx;
								color: #1B2120;
							}
						}

						.card_item_text_pet_bottom {
							font-size: 26rpx;
							color: #7C807F;
						}
					}

				}

				.card_item_pet {
					margin-bottom: 40rpx;
					flex-direction: row;
					//align-items: normal;
				}

				.card_item_pet:last-child {
					margin-bottom: 0rpx;
				}

				.add_pet {
					display: flex;
					align-items: center;

					.add_pet_img {
						margin-right: 24rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.add_pet_text {
						font-size: 32rpx;
						color: #1B2120;
					}
				}

			}

			.card_content_pet {
				justify-content: normal;
				align-items: normal;
				flex-direction: column;

				.card_content_pet_scroll {
					margin-bottom: 40rpx;
					max-height: 280rpx;
				}
			}

		}

		.tools {
			padding: 48rpx 32rpx;

			.tools_content {
				.tools_content_item {
					padding-bottom: 48rpx;
					margin-bottom: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #E4E6E6;

					.tools_content_item_left {
						display: flex;
						align-items: center;

						image {
							margin-right: 16rpx;
							width: 40rpx;
							height: 40rpx;
						}

						view {
							font-size: 32rpx;
							color: #1B2120;
						}
					}

					.tools_content_item_right {}
				}

				.tools_content_item:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border: none;
				}
			}
		}
	}
</style>